<template>
    <div>
        <ZkModalVue  :title="title" :size="'sm'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
            <a-form-model ref="form" :model="info" v-bind="formLayout" :rules="rules">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="角色名称" prop="roleName">
                            <a-input v-model="info.roleName" :maxLength="20" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="权限字符" prop="roleKey">
                            <a-input v-model="info.roleKey" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="排序" prop="roleSort">
                            <a-input-number v-model="info.roleSort" style="width:100%" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="备注" prop="remark">
                            <a-textarea v-model="info.remark" :autoSize="{ minRows: 4, maxRows: 10 }" :maxLength="500" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </ZkModalVue>
    </div>
</template>
<script>
import ZkModalVue from '@/appBase/ZkModal.vue';
import { lenRule, notEmptyRule } from '@/appBase/formRules';
import { BaseSysStatusEnum } from '@/modules/common/enum/enum';
import { addRole, getRole, updateRole } from '@/api/role';

export default {
    name: "RoleEdit",
    components: {
        ZkModalVue,
    },
    data() {
        return {
            title: '角色修改',
            pageLoading: false,
            visible: false,
            /** 布局配置 */
            formLayout: {
                layout: 'horizontal',
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 17 }
                }
            },
            id: null,
            info: {
                roleName: '',
                roleKey: '',
                roleSort: ''
            },
            rules: {
                roleName: [notEmptyRule(), lenRule({ max: 20 })],
                roleKey: [notEmptyRule()],
                roleSort: [notEmptyRule()]
            }
        }
    },
    methods: {
        show(param) {
            this.id = param.id;
            this._onOk = param.onOk;
            this._onCancel = param.onCancel;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs.form.resetFields();
                if (this.id) {
                    this.title = '角色修改';
                    getRole(this.id).then((result) => {
                        Object.assign(this.info, result);
                    });
                } else {
                    this.title = '角色新增';
                }
            })
        },
        handleOk() {
            this.$refs.form.validate(async (valid) => {
                if (!valid) return;
                const { roleId, roleKey, roleName, roleSort, status, menuIds } = this.info;
                if (this.id) {
                    await updateRole({ roleId, roleKey, roleName, roleSort, status, menuIds: menuIds || [] });
                } else {
                    await addRole({ roleKey, roleName, roleSort, status: status || BaseSysStatusEnum.ENABLE, menuIds: menuIds || [] });
                }
                this.visible = false;
                if (this._onOk) this._onOk();
            })
        },
        handleCancel() {
            this.visible = false;
            if (this._onCancel) this._onCancel();
        }
    }
}
</script>